<!DOCTYPE html>
<meta charset="utf-8">
<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>
<div class="globalText" style="padding: 15px;border: none;margin: 5px;width: auto;">
    <form:form target="tempFrame" commandName="updateProjectStoreRequiredSalesNumber" action="updateProjectStoreRequiredSalesNumber.html">
        <input type="hidden" id="v1" name="projectStoreId" value="${projectStoreId}">
        <label for="v2">促销员配额：</label><input type="number" id="v2" name="requiredSalesNumber" value="${requiredSalesNumber}"/>
        <input type="hidden" name="sellingTargetYear" id="input_sellingTargetYear">
        <input type="hidden" name="sellingTargetDataString" id="input_sellingTargetDataString">
        <div>门店销量目标（单位：元）</div>
        <div style="text-align: center; font-size: 14px">
            <span onclick="ui.targetYear--; ui.refresh()" style="cursor:pointer;">&nbsp;&lt;-&nbsp;</span>
            <span id="span_year">${thisYear}</span>
            <span onclick="ui.targetYear++; ui.refresh()" style="cursor:pointer;">&nbsp;-&gt;&nbsp;</span>
        </div>
        <table class="calendar_month_number" id="calendar">
            <tr>
                <td>一月</td>
                <td>二月</td>
                <td>三月</td>
            </tr>
            <tr>
                <td><input type="number" id="month_1"></td>
                <td><input type="number" id="month_2"></td>
                <td><input type="number" id="month_3"></td>
            </tr>
            <tr>
                <td>四月</td>
                <td>五月</td>
                <td>六月</td>
            </tr>
            <tr>
                <td><input type="number" id="month_4"></td>
                <td><input type="number" id="month_5"></td>
                <td><input type="number" id="month_6"></td>
            </tr>
            <tr>
                <td>七月</td>
                <td>八月</td>
                <td>九月</td>
            </tr>
            <tr>
                <td><input type="number" id="month_7"></td>
                <td><input type="number" id="month_8"></td>
                <td><input type="number" id="month_9"></td>
            </tr>
            <tr>
                <td>十月</td>
                <td>十一月</td>
                <td>十二月</td>
            </tr>
            <tr>
                <td><input type="number" id="month_10"></td>
                <td><input type="number" id="month_11"></td>
                <td><input type="number" id="month_12"></td>
            </tr>
        </table>
        <hr>
        <input type="button" class="btnStyle" value="保存" onclick="ui.save()">
        <input type="button" class="btnStyle" value="关闭" onclick="window.close()">
    </form:form>
</div>

<script>
    var ui = {
        validData: true,
        projectStoreId: $('#v1').val(),
        targetYear: $('#span_year').text(),
        updateCalendar: function () {
            var obj = $('#month_1');
            var val = obj.prop('valueAsNumber');
            var hdr = obj.prop('placeholder');
            val == hdr && obj.val(val = Number.NaN);
            for (var i = 2; i <= 12; i++) {
                obj = $('#month_' + i);
                (hdr = val || hdr) == (val = obj.prop('valueAsNumber')) && (val = Number.NaN);
                obj.val(val).prop('placeholder', hdr);
            }
        },
        composeCalendarData: function () {
            var s = '';
            for (var i = 1; i <= 12; i++) {
                var val = $('#month_' + i).prop('valueAsNumber');
                if (val > 0x7FFFFFFE || val < 0) {
                    this.validData = false;
                    alert('' + i + '月销量目标设置无效');
                    return;
                } else {
                    isNaN(val) || (s += ';' + i + ':' + val);
                }
            }
            return s;
        },
        refresh: function () {
            $.getJSON('getProjectStoreSellingTarget.html', {year: this.targetYear, projectStoreId: this.projectStoreId},
                    function (data) {
                        $('#span_year').text(ui.targetYear);
                        $('#month_1').prop('placeholder', data.placeholder);
                        for (var i = 1; i <= 12; i++) {
                            $('#month_' + i).val(data[i]);
                        }
                        ui.updateCalendar();
                    });
        },
        save: function () {
            this.validData = true;
            $('#input_sellingTargetYear').val(this.targetYear);
            $('#input_sellingTargetDataString').val(this.composeCalendarData());
            this.validData && $('#updateProjectStoreRequiredSalesNumber').submit();
        }
    };

    function submitCallbackSuccess(obj) {
        window.close();
    }

    $('#calendar input[type="number"]').each(function () {
        this.onchange = ui.updateCalendar;
    });
    // Lock'n'Load
    ui.refresh();
</script>
